<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
  </head>
  <body class="bg-[#0a2a43] min-h-[1500px] select-none">
    <section
      class="relative w-full h-screen overflow-hidden flex justify-center items-center before:bg-gradient-to-t before:from-[#0a2a43] before:to-transparent before:bottom-0 before:z-50 before:absolute before:w-full before:h-[100px] after:absolute after:w-full after:h-full after:bg-[#0a2a43] after:z-50 after:top-0 after:left-0 after:mix-blend-color"
    >
      >
      <img
        class="absolute top-0 left-0 w-full h-full object-cover pointer-events-none"
        src="../images/bg.jpg"
        alt=""
        id="bg"
      />
      <img
        class="absolute top-0 left-0 w-full h-full object-contain pointer-events-none"
        src="../images/moon.png"
        alt=""
        id="moon"
      />
      <img
        class="absolute top-0 left-0 w-full h-full object-cover pointer-events-none"
        src="../images/mountain.png"
        alt=""
        id="mountain"
      />
      <img
        class="absolute top-0 left-0 w-full h-full object-cover pointer-events-none z-20"
        src="../images/road.png"
        alt=""
        id="road"
      />
      <h2 id="text" class="relative text-white text-[10rem] z-10 font-['DancingScript']">Moon Light</h2>
    </section>
    <script>
      let bg = document.getElementById('bg')
      let moon = document.getElementById('moon')
      let mountain = document.getElementById('mountain')
      let road = document.getElementById('road')
      let text = document.getElementById('text')

      window.addEventListener('scroll', function () {
        let value = window.scrollY
        bg.style.top = value * 0.5 + 'px'
        moon.style.left = -value * 0.5 + 'px'
        mountain.style.top = -value * 0.15 + 'px'
        road.style.top = value * 0.15 + 'px'
        text.style.top = value * 1 + 'px'
        // 新增文字随滚动条滚动透明度变化
        text.style.opacity = 1 - value / 250
      })
    </script>
  </body>
</html>
